<div id="app" v-cloak class="flex-row flex-content-between" style="padding: 20px;height: calc(100vh - 120px);background-color: #dddddd">
    <div style="background-color: #FFFFFF;width: 30%;padding: 20px" >
        <el-form :model="form" ref="form" :rules="rules" label-width="auto" style="">
            <el-form-item label="手机号码" prop="username">
                <el-input v-model="form.username" placeholder="请填写手机号码"/>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
                <el-input v-model="form.nickname" placeholder="请填写昵称"/>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" placeholder="前些密码视为修改" show-password/>
            </el-form-item>
            <el-form-item label="头像" prop="avatar">
                <el-upload
                        class="avatar-uploader"
                        :data="uploaderParameter"
                        :action="uploadurl"
                        :show-file-list="false"
                        :on-success="(response,uploadFile)=>handleFileSuccess(response,uploadFile,`avatar`)"
                >
                    <img v-if="form.avatar" :src="getImg(form.avatar)" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input  v-model="form.email" placeholder="请填写邮箱"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitUser" color="#626aef">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div style="width: 60%;background-color: #FFFFFF;padding: 10px">
        <div class="flex-row" style="margin-left: 10px">
            <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>
        </div>
        <el-table :data="dataObj.rows" style="width: 100%"
                  :show-overflow-tooltip="true"
                  :height="height?height:500"
                  @selection-change="$event=>handleSelectionChange($event,pk?pk:`id`)"
        >
            <el-table-column type="selection" :selectable="selectable" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="username" label="用户名" >
            </el-table-column>
            <el-table-column prop="title" label="标题" >
            </el-table-column>
            <el-table-column prop="url" label="Url" >
            </el-table-column>
            <el-table-column prop="ip" label="IP" >
            </el-table-column>
            <el-table-column prop="" label="创建时间" >
                <template #default="scope">
                    {{getDate(scope.row.createtime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180" fixed="right">
                <template #default="scope">
                    <el-button v-if="select!=1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex-row flex-content-end" style="width: 100%;background-color: #FFFFFF">
            <el-pagination
                    size="small"
                    class="mt-4"
                    style="margin-right: 20px"
                    :current-page="dataObj.page"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="dataObj.limit"
                    layout="prev, pager, next"
                    :total="dataObj.total"
                    prev-text="上一页"
                    next-text="下一页"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            ></el-pagination>
        </div>
    </div>
</div>